<template>
	<div class="header">
		<div class="content-weapper">
			<div class="avatar">
				<img :src="seller.avatar" width="64" height="64"/>
			</div>
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟送达
				</div>
				<div v-if="seller.supports" class="supports">
					<span class="icon" :class="classMap[seller.supports[type].type]"></span>
					<span class="text">{{seller.supports[type].description}}</span>
				</div>
			</div>
      <div v-if="seller.supports" class="support-count" @click="isModel=true">
        <span class="count">{{seller.supports.length}}个</span>
        <i class="fa fa-angle-right"></i>
      </div>
		</div>
		<div class="bulletin-wrapper" @click="isModel=true">
      <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
      <i class="fa fa-angle-right"></i>
    </div>
    <div class="background" :style="'background-image:url('+seller.avatar+')'">
    </div>
    <transition  name="fade">
      <div v-show="isModel" class="model">
        <div class="model-weapper clearfix">
          <div class="content">
            <h1 class="c-title">{{seller.name}}</h1>
            <div class="c-star">
                <star :size="48" :score="seller.score" :max="5"></star>
            </div>
            <div class="c-s-title">
              <div class="line"></div>
              <div class="text">优惠信息</div>
              <div class="line"></div>
            </div>
            <ul v-if="seller.supports" class="supports">
              <li v-for="item in seller.supports">
                <span class="icon" :class="classMap[item.type]"></span>
                <span class="text">{{item.description}}</span>
              </li>
            </ul>
            <div class="c-s-title">
              <div class="line"></div>
              <div class="text">商家信息</div>
              <div class="line"></div>
            </div>
            <p class="bulletin">{{seller.bulletin}}</p>
          </div>
        </div>
        <div class="model-close" @click="isModel=false">
          <i class="fa fa-close"></i>
        </div>
      </div>
    </transition>
	</div>
</template>

<script type="text/ecmascript-6">
import star from '../star/star.vue'
export default {
  created(){
  	
  },
  mounted(){
  	
  },
  props:{
  	seller:{
  		type:Object,
  		default(){
  			return {}
  		}
  	}
  },
  data () {
    return {
     classMap:["decrease","discount","special","invoice","guarantee"],
      type:2,
      isModel:false
    }
  },
  methods:{

  },
  computed:{
  	
  },
  watch:{
  	
  },
  components:{
  	star
  }
}
</script>
<style lang="stylus" rel="stylesheet/styleus">
@import "../../common/stylus/mixin";
  .header
    color:#fff
    background-color: rgba(7,17,27,.5)
    position relative
    overflow hidden
    .content-weapper
      padding:24px 12px 18px 24px
      font-size:0
      position relative
      .avatar
        display:inline-block
        vertical-align top
        img
          border-radius:2px
      .content
        display:inline-block
        font-size:14px
        margin-left:16px
        .title
          margin:2px 0 8px 0
          .brand
            display:inline-block
            width:30px
            height:18px
            vertical-align:top
            background-size:30px 18px
            background-repeat:no-repeat
            bg-img("brand")
          .name
            margin-left:6px
            font-size:16px
            line-height:18px
            font-weight:bold
        .description
          margin-bottom:10px
          line-height:12px
          font-size:12px
        .supports
          line-height 12px
          height 14px
          .icon
            display inline-block
            width 12px
            height 12px
            margin-right 4px
            background-size 12px
            background-repeat no-repeat
            &.decrease
              bg-img("decrease_1")
            &.discount
              bg-img("discount_1")
            &.guarantee
              bg-img("guarantee_1")
            &.invoice
              bg-img("invoice_1")
            &.special
              bg-img("special_1")
          .text
            font-size 10px
            vertical-align middle
      .support-count
        position: absolute
        right 12px
        bottom 14px
        padding 0 8px
        height 24px
        line-height 26px
        border-radius 14px
        background rgba(0,0,0,.2)
        text-align center
        .count
          font-size 10px
        .fa-angle-right
          font-size 10px
          margin-left 2px

    .bulletin-wrapper
      height 28px
      line-height 28px
      padding 0 22px 0 12px
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      position relative
      background rgba(7,17,27,.2)
      .bulletin-title
        display inline-block
        width 22px
        height 12px
        bg-img('bulletin')
        background-size 22px 12px
        background-repeat no-repeat
      .bulletin-text
        vertical-align top
        margin 0 4px
        font-size 10px
      .fa-angle-right
        position absolute
        font-size 10px
        line-height 28px
        right 12px
        line-height 28px
    .background
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index -1
      filter blur(10px)
      background no-repeat;
      background-size cover
    .model
      position fixed
      height 100%
      width 100%
      top 0
      left 0
      z-index: 100
      overflow auto
      background rgba(7,17,27,.8)
      transition all .5s
      backdrop-filter blur(10px)
      &.fade-transition
        opacity 1
        background rgba(7,17,27,.8)
      &.fade-enter,&.fade-leave
        opacity 0
        background rgba(7,17,27,0)
      .model-weapper
        min-height 100%
        .content
          padding 64px 36px
          .c-title
            font-size 16px
            font-weight 700
            color: #ffffff
            line-height 16px
            text-align center
          .c-star
            text-align center
            line-height 24px
            padding 16px 0
          .c-s-title
            display: flex
            margin 30px 0;
            width 100%
            .line
              flex 1
              border-top 1px solid rgba(255,255,255,.2)
              transform translateY(50%)
            .text
              color #ffffff
              padding 0 12px
              font-size 14px
              font-weight 700
          .supports
            padding 0 12px
            li
              height 28px
              line-height 28px
              .icon
                display inline-block
                width 16px
                height 16px
                margin-right 6px
                background-size 16px
                background-repeat no-repeat
                line-height 28px
                vertical-align middle
                &.decrease
                  bg-img("decrease_2")
                &.discount
                  bg-img("discount_2")
                &.guarantee
                  bg-img("guarantee_2")
                &.invoice
                  bg-img("invoice_2")
                &.special
                  bg-img("special_2")
              .text
                font-size 12px
                line-height 28px
          .bulletin
            padding 0 12px
            font-size 12px
            font-weight 200
            line-height 24px
            color: #fff
            text-align justify
      .model-close
        height 64px
        line-height 32px
        font-size 32px
        color: rgba(255,255,255,.5)
        text-align center
        position relative
        margin-top -64px
        clear both

</style>
